<template>
  <div class="dashboard-container">
    <h2>首页</h2>
    <!--
      <div class="dashboard-text">name: {{ name }}</div>
      <div>{{ $store.state.app.device }}</div>
    -->
    <!-- 1. 获取token -->
    <!--
      <div>登录令牌state方式获取:{{ $store.state.user.token }}</div>
      <div>登录令牌getter方式获取:{{ $store.getters.token }}</div>
    -->

    <!-- 2. sass的使用 -->
    <!-- <div class="box">
      <p>测试样式</p>
    </div> -->

    <!-- 3. 测试svg精灵图使用 -->
    <!-- 不封装使用 -->
    <!-- <svg><use xlink:href="#icon-dashboard" /></svg>
    <svg><use xlink:href="#icon-eye" /></svg> -->
    <!-- 封装成组件使用 -->
    <!-- <svg-icon icon-class="eye" /> -->

    <!-- 4. 测试深度穿透选择器 -->
    <deep-test class="box" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DeepTest from './components/DeepTest.vue'
export default {
  name: 'Dashboard',
  components: {
    DeepTest
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
// sass是css预编译语言的一种, 常用的有less、sass和stylus
//  (用法比较类似, 会一个基本就全会了, 语法上稍微有些不同)

// sass有两种格式, 早期是: .sass, 后期是.scss(常用)

// .sass
// .box
//   width: 200px
//   height: 200px
//   background-color: red
//   border-radius: 50%
//   text-align: center
//   line-height: 200px
//   p
//     font-size: 20px
//     &:hover
//       color: skyblue
//   &:hover
//     background-color: green

// .scss
// $bgColor: green;
// .box {
//   width: 200px;
//   height: 200px;
//   background-color: $bgColor;
//   p {
//     font-size: 20px;
//     color: red;
//     text-align: center;
//   }
//   &:hover{
//     background-color: purple;
//   }
// }

  .box{
     // 深度穿透选择器
     ::v-deep{
        button {
          width: 200px;
          height: 50px;
          background-color: red;
        }
     }
  }
</style>
